<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Values Test: computed value of 3 calc() values</title>


  <!--
  "
  Where percentages are not resolved at computed-value time,
  they are not resolved in math functions, e.g.
  'calc(100% - 100% + 1px)' resolves to 'calc(0% + 1px)', not to
  '1px'. If there are special rules for computing percentages
  in a value (e.g. the 'height' property), they apply whenever
  a math function contains percentages.
  "
  § 10.11 Computed Value
  https://www.w3.org/TR/css-values-4/#calc-computed-value
  -->

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
  <link rel="help" href="https://www.w3.org/TR/css-values-4/#calc-computed-value">

  <meta name="flags" content="">
  <meta content="This test verifies that terms with a percentage unit that can not be resolved at computed-value time will require a calc() wrapper. A term with an em value, on the other hand, must be resolved at computed-value time and therefore must be absolutized to 'px'." name="assert">

  <script src="/resources/testharness.js"></script>

  <script src="/resources/testharnessreport.js"></script>

  <style>
  html, body
    {
      font-size: 16px;
      height: 570px;
    }

  div#target
    {
      background-color: yellow;
      background-image: url("support/cat.png");
      background-position: top center;
      background-repeat: no-repeat;
      background-size: 14% 50%; /* entirely arbitrary and random background-size values */
      height: 200px;
    }
  </style>

  <div id="target"></div>

  <script>
  function startTesting()
  {

  var targetElement = document.getElementById("target");

    function verifyComputedStyle(property_name, specified_value, expected_value)
    {

    test(function()
      {

      targetElement.style.setProperty(property_name, specified_value);

      assert_equals(getComputedStyle(targetElement)[property_name], expected_value);

      }, `testing ${property_name}: ${specified_value}`);
    }

    verifyComputedStyle("background-size", "calc(67% - 54% + 4em) 50%", "calc(13% + 64px) 50%");

    /*
    "Where percentages are not resolved at computed-value time,
    they are not resolved in math functions (...)"
    https://www.w3.org/TR/css-values-4/#calc-serialize

    Therefore here, the percentage is preserved and
    a calc() wrapper must be used. The 4em term
    must be resolved though.
    */

    verifyComputedStyle("background-position", "calc(100% - 100% + 20em)", "calc(0% + 320px) 50%");

    /*
    Here too, the percentage is preserved and
    a calc() wrapper must be used. The 20em term
    must be resolved though.
    */


    verifyComputedStyle("height", "calc(60% - 50% + 3em)", "105px");

    /*

    The height of the containing block of div#target is not auto.
    So, such percentage can and must be resolved at
    computed-value time.

     570px mult 10% == 57px

                 +     48px
                 ============
                      105px

    */
  }

  startTesting();

  </script>
